@charset "utf-8";
@import "../lib/hotcss-v2.0.1/imochen-hotcss/src/px2rem.scss";

$designWidth: 640;

.layer-interval {
  height: px2rem(16);
  width: 100%;
  background: #eeeeee;
}
header {
  top: 0;
  left: 0;
  z-index: 1000;
  position: fixed;
  width: 100%;
  .top-hd {
    position: relative;
    height: px2rem(75);
    width: 100%;
    background: linear-gradient(to right, #910657, #f71c5a);
    color: rgb(254, 254, 254);
    h3 {
      font-size: px2rem(32);
      display: block;
      font-weight: 500;
      height: px2rem(75);
      line-height: px2rem(75);
      text-align: center;
    }
    .iconfont {
      position: absolute;
      top: 50%;
      left: px2rem(23);
      transform: translate(0, -50%) rotate(180deg);
      font-size: px2rem(48);
      height: px2rem(48);
      line-height: px2rem(48);
      color: rgb(254, 254, 254);
      //   transform: rotate(180deg);
    }
  }
}
main {
  width: 100%;
  background-color: rgb(255, 255, 254);
  margin: px2rem(75) 0 px2rem(88);

  .layer-address {
    .address-adornment {
      ul {
        width: 100%;
        height: px2rem(22);
        overflow: hidden;
        li {
          float: left;
          margin-left: px2rem(6);
          width: px2rem(16);
          height: px2rem(22);
          transform: skew(-29deg, 0deg);
        }
        .adornment-pink {
          background: #ffa7c6;
        }
        .adornment-blue {
          background: #b1d9ff;
        }
      }
    }
    .address-content {
      margin: px2rem(10) 0 0 px2rem(23);
      height: px2rem(143);
      font-size: px2rem(24);
      p {
        width: px2rem(596);
        line-height: px2rem(35);
      }
    }
  }
  .layer-order {
    .order-hd {
      overflow: hidden;
      margin-left: px2rem(22);
      font-size: px2rem(17);
      letter-spacing: px2rem(1);
      line-height: px2rem(41);
      height: px2rem(41);
      //   width: 100%;
      color: #3d3d3d;
      span {
        font-size: px2rem(18);
        color: #ed2461;
        font-weight: 300;
      }
    }
    .order-middle {
      width: 100%;
      height: px2rem(131);
      border-top: 2px solid #f5f5f5;
      border-bottom: 1px solid #f5f5f5;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .order-middle-l {
        margin-left: px2rem(22);
        img {
          border: 1px solid #f3ede4;
          width: px2rem(103);
          height: px2rem(103);
          vertical-align: middle;
          box-sizing: border-box;
        }
      }
      .order-middle-r {
        margin-left: px2rem(12);
        height: px2rem(103);
        color: #767676;

        p {
          line-height: px2rem(23);
          font-size: px2rem(23);
          span {
            color: #ec1b5b;
          }
        }
        img {
          margin-top: px2rem(8);
          display: block;
          width: px2rem(56);
          height: px2rem(16);
          vertical-align: middle;
        }
        h3 {
          margin-top: px2rem(17);
          color: #ec1b5b;
          font-size: px2rem(25);
          line-height: px2rem(25);
        }
      }
    }
    .order-bd {
      margin: 0 px2rem(22);
      height: px2rem(72);
      border-bottom: 1px solid #f5f5f5;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #696969;
      .order-bd-l {
        p {
          font-size: px2rem(25);
          line-height: px2rem(25);
        }
      }
      .order-bd-r {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          letter-spacing: px2rem(1);
          display: block;
          font-size: px2rem(16);
          line-height: px2rem(30);
          width: px2rem(170);
        }
        .iconfont {
          display: inline-block;
          font-size: px2rem(28);
          line-height: px2rem(28);
          height: px2rem(28);
        }
      }
    }
  }
}
footer {
  background: rgb(254, 254, 254);
  z-index: 1000;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  .goods-account-wrap {
    .goods-account-wrap-hd {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: px2rem(89);
      width: 100%;
      .account-l {
        margin-left: px2rem(22);
        display: flex;
        justify-content: start;
        align-items: center;
        .account-l-sum {
          font-size: px2rem(23);
          color: #888888;
          .price-num {
            font-size: px2rem(24);
            color: #ec1e5d;
            font-weight: 200;
          }
        }
      }
      .account-r {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // .account-r-sum {
        //   font-size: px2rem(23);
        //   color: #888888;
        //   .price-num {
        //     font-size: px2rem(24);
        //     color: #ec1e5d;
        //     font-weight: 200;
        //   }
        // }
        .account-r-settle {
          width: px2rem(190);
          height: 100%;
          line-height: px2rem(89);
          text-align: center;
          background: linear-gradient(to right, #910657, #f71c5a);
          color: #eeeeee;
          font-size: px2rem(27);
        }
      }
    }
  }
}
